<template>
  <!-- 调整预期收益率 -->
  <el-row>
    <el-col style="margin-top: 20px">
      <el-card
        style="
          border-radius: 10px;
          background: -webkit-linear-gradient(bottom, #3600f921, #3600f974)
            no-repeat;
        "
      >
        <el-row
          style="
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
          "
        >
          <el-col span="5">
            <div
              style="
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: flex-start;
              "
            >
              <button
                class="el-icon-arrow-left"
                @click="clickmenu()"
                style="
                  font-size: 40px;
                  padding: 0px;
                  font-weight: bold;
                  color: #ffffff;
                  background-color: Transparent;
                  border-width: 0px;
                "
              ></button>
              <div style="font-size: 30px; font-weight: bold">方案变更</div>
            </div>
          </el-col>
          <el-col span="19">
            <el-steps :active="1" finish-status="success" simple style="">
              <el-step title="Step 1:用户测评"></el-step>
              <el-step title="Step 2:预期收益率调整"></el-step>
              <el-step title="Step 3:确认基金序列"></el-step>
            </el-steps>
          </el-col>
        </el-row>
      </el-card>

      <el-row
        style="display: flex; align-items: center; justify-content: center"
      >
        <el-col span="19" style="">
          <el-card
            class="card"
            style="
              margin-top: 20px;
              border-radius: 10px;
              background: -webkit-linear-gradient(right, #39c5bb50, #39c5bb)
                no-repeat;
            "
            body-style="padding:0px 20px;"
          >
            <div
              slot="header"
              class="clearfix"
              style="
                text-align: left;
                font-size: 25px;
                font-weight: bold;
                color: #ffffff;
              "
            >
              <span>方案配置</span>
            </div>
            <el-row>
              <el-col
                span="9"
                style="
                  padding: 20px 0px;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  justify-content: center;
                "
              >
                <el-row>
                  <div
                    style="
                      background-color: #ffffff30;
                      border: 3px solid #ffffff;
                      border-radius: 10px 10px 10px 0px;
                      text-align: left;
                    "
                  >
                    <p
                      style="
                        font-size: 25px;
                        font-weight: bold;
                        color: #ffb571;
                        margin-top: 20px;
                        margin-bottom: 0px;
                      "
                      :style="{
                        color: schemecolor,
                      }"
                    >
                      {{ schemename }}
                    </p>
                    <p
                      style="
                        font-weight: bold;
                        color: #ffffff;
                        margin-top: 0px;
                        margin-bottom: 20px;
                      "
                    >
                      {{ schemedescription }}
                    </p>
                  </div>
                </el-row>
                <el-row>
                  <div style="text-align: left">
                    <p
                      style="
                        font-weight: bold;
                        color: #ffffff;
                        margin-top: 20px;
                        margin-bottom: 0px;
                      "
                    >
                      根据（算法名）模型测算，本方案投资
                      <span style="color: #ffb571">1万</span>
                      并持有
                      <span style="color: #ffb571">{{ year }}年</span>
                    </p>
                  </div>
                </el-row>
                <el-row>
                  <div style="text-align: left">
                    <p
                      style="
                        font-weight: bold;
                        color: #ffffff;
                        margin-top: 20px;
                        margin-bottom: 0px;
                      "
                    >
                      较好情况可赚
                      <span style="color: #ffb571">{{ earn }}</span>
                    </p>
                    <p
                      style="
                        font-weight: bold;
                        color: #ffffff;
                        margin-top: 20px;
                        margin-bottom: 0px;
                      "
                    >
                      较差情况下亏损不超过
                      <span style="color: #ffb571">{{ lose }}</span>
                    </p>
                  </div>
                </el-row>
              </el-col>
              <el-col span="15" style="">
                <el-row
                  style="
                    padding-top: 20px;
                    display: flex;

                    align-items: center;
                    justify-content: center;
                  "
                >
                  <el-col
                    span="8"
                    style="
                      display: flex;
                      flex-flow: column nowrap;
                      align-items: center;
                      justify-content: center;
                    "
                    ><span
                      style="color: #169bd5; font-size: 32px; font-weight: bold"
                      >{{ steady }}%</span
                    >
                    <span
                      style="color: #333333; font-size: 28px; padding: 10px 0px"
                      >稳健收益</span
                    >
                    <span style="color: #3333336b; font-size: 20px"
                      >固收类基金</span
                    >
                  </el-col>
                  <el-col span="8" style=""
                    ><el-progress
                      type="circle"
                      :width="170"
                      :stroke-width="26"
                      :percentage="radical"
                      :format="format"
                      stroke-linecap="butt"
                      color="#ffb571"
                    ></el-progress
                  ></el-col>
                  <el-col
                    span="8"
                    style="
                      display: flex;
                      flex-flow: column nowrap;
                      align-items: center;
                      justify-content: center;
                    "
                    ><span
                      style="color: #ffb571; font-size: 32px; font-weight: bold"
                      >{{ radical }}%</span
                    >
                    <span
                      style="color: #333333; font-size: 28px; padding: 10px 0px"
                      >博取资产</span
                    >
                    <span style="color: #3333336b; font-size: 20px"
                      >股票类基金</span
                    >
                  </el-col>
                </el-row>
                <el-row
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 70px;
                  "
                >
                  <el-col span="6" style="">
                    <div style="padding-top: 10px; text-align: left">
                      您的目标收益率(%):
                    </div>
                  </el-col>
                  <el-col span="18" style="">
                    <div class="block">
                      <el-slider
                        class="slider1"
                        v-model="value"
                        :min="min"
                        :step="0.01"
                        :max="max"
                        :marks='marks'
                        show-input
                        @input="compute($event)"
                      >
                      </el-slider>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col
          :span="5"
          style="
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
          "
        >
          <BackButton style="width: 80%; height: 80px"></BackButton>
          <el-button
            style="
              border-radius: 10px;
              color: #ffffff;
              background-color: #39c5bb70;
              border-width: 3px;
              border-color: #39c5bb;
              margin: 30px 0px;
              padding: 0px;
              width: 80%;
              height: 80px;
            "
            @click="nextpage"
          >
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <span style="font-size: 30px; font-weight: bold">下一步</span>
              <i
                class="el-icon-right"
                style="font-size: 50px; padding-left: 10px; font-weight: bold"
              ></i>
            </div>
          </el-button>
        </el-col>
      </el-row>

      <el-row
        :gutter="20"
        style="
          display: flex;
          justify-content: space-between;
          flex-flow: row nowrap;
        "
      >
        <el-card
          class="card"
          style="
            margin-top: 20px;
            border-radius: 10px;
            width: 50%;
            margin: 20px 10px;
          "
          body-style="padding:30px 20px;display: flex;
              align-items: center;"
        >
          <div
            slot="header"
            style="text-align: left; font-size: 25px; font-weight: bold"
          >
            <span>换方案流程</span>
          </div>
          <el-col
            span="24"
            style="
              padding-top: 10px;
              padding-bottom: 10px;
              padding-right: 10px;
              padding-left: 0px;
            "
          >
            <el-row>
              <el-col span="7">
                <div style="font-size: 20px; font-weight: bold">提交更换</div>
              </el-col>
              <el-col span="10">
                <div style="font-size: 20px; font-weight: bold">更换成功</div>
              </el-col>
              <el-col span="7">
                <div
                  style="font-size: 20px; font-weight: bold; text-align: right"
                >
                  跟踪数据更新
                </div>
              </el-col>
            </el-row>
            <el-row>
              <div>
                <el-slider class="slider2" disabled v-model="value2" range>
                </el-slider>
              </div>
            </el-row>
            <el-row>
              <el-col span="7">
                <div style="font-size: 20px; font-weight: bold">现在</div>
              </el-col>
              <el-col span="10">
                <div style="font-size: 20px; font-weight: bold">当日</div>
              </el-col>
              <el-col span="7">
                <div
                  style="font-size: 20px; font-weight: bold; text-align: right"
                ></div>
              </el-col>
            </el-row>
            <el-row style="text-align: left; font-weight: bold; color: #a3a3a3">
              *以上为跟踪情况下的示例，当持有资产后更换方案时间以最新页面提示为准
            </el-row>
          </el-col>
        </el-card>

        <el-card
          class="card"
          style="
            margin-top: 20px;
            border-radius: 10px;
            width: 50%;
            margin: 20px 10px;
          "
          body-style="padding:10px 50px"
        >
          <div
            slot="header"
            style="text-align: left; font-size: 25px; font-weight: bold"
          >
            <span>方案服务费</span>
          </div>
          <el-row style="text-align: left; font-size: 22px"> 计算方式 </el-row>
          <el-row style="text-align: left; font-size: 18px">
            本方案按天计算服务费（当日总资产的约<span style="color: #ff8b35"
              >0.0014%</span
            >，合年化资产管理总额的<span style="color: #ff8b35">0.50%</span>)
          </el-row>

          <el-row style="text-align: left; font-size: 22px; padding-top: 20px">
            收取方式
          </el-row>
          <el-row style="text-align: left; font-size: 18px">
            按季度收取;若在收取日前转出，则在转出时收取转出部分的服务费
            ‘基金交易相关费用仍按照策略内单只基金产品的收费规则收取
          </el-row>
        </el-card>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { adjustRiskAssetsRateAPI } from "@/api/adjustRiskAssetsRateAPI";
import { getExpectedRateAPI } from "@/api/getExpectedRateAPI";
import BackButton from "@/components/BackButton.vue";
export default {
  methods: {
    // 跳转到确认基金序列页面
  nextpage() {
       this.$confirm(
        "点击确定将进入确认基金序列，是否继续？",
        "下一步"
      ).then( async ()=>{
      // 发送post请求发送form表单
      const {data :res} =await adjustRiskAssetsRateAPI(this.$qs.stringify({user_adjust_risk_assets_rate_form : JSON.stringify(this.form)}))
      if(res.flag){
          this.$router.push({
        path: "confirmfundsequence",
        query: {
          user_id: this.$route.query.user_id,
        },
      });
      }
      }).catch(()=>{
        this.$message.info('操作取消')
      })


    },

    // 返回主页面
    clickmenu() {
      this.$router.go(-2);
    },
    format(percentage) {
      if (percentage < 30) {
        return "低风险";
      } else if (percentage < 50) {
        return "中低风险";
      } else if (percentage < 80) {
        return "中风险";
      } else if (percentage < 90) {
        return "中高风险";
      } else {
        return "高风险";
      }
    },
    compute(value) {
      this.a = (value - this.min)/(this.max-this.min) * 90;
      this.form.user_risk_ratio=parseFloat(this.radical)/100
    },
// 获取投资年限，预期收益率上下限
    async getExpectedRate(){
        const {data :res} =await getExpectedRateAPI(this.$route.query.user_id)
        if(res.flag){
          this.$message.success('获取预期收益率成功！')
          // 取出数据并覆盖
          var list=res.data
          var object=list[0]
          this.max=object.max_expected_return
          this.min=object.min_expected_return
          this.year=object.user_expected_time
        }
    }
  },
  data() {
    return {
      value: 0,
      value2: [15, 50],
      // 从get请求获得
      year: 4,
      min:2.0,
      max:11.0,
      a: 0,
      color: "black",
      // 刻度
      marks: {
        1:'1',
        2: "2",
        3: "3",
        4: "4",
        5: "5",
        6: "6",
        7: "7",
        8: "8",
        9: "9",
        10: "10",
        11: "11",
        12:'12',
        13:'13',
        14:'14',
        15:'15',
        16:'16',
        17:'17',
        18:'18',
        19:'19',
        20:'20',
      },

      form:{
        user_id:this.$route.query.user_id,
        user_risk_ratio:0
      }

    };
  },
  computed: {
    // 风险资产比例
    radical() {
      return this.a.toFixed(2);
    },
    // 稳定资产比例
    steady() {
      return (100.0 - this.radical).toFixed(2);
    },
    // 较好情况下可赚
    earn() {
      return ((this.a / 10 + 2) * 100 * this.year).toFixed(2);
    },
    // 较亏情况下亏损不超过
    lose() {
      return (
        (this.radical * 100 * 0.1 + this.steady * 100 * 0.01) *
        this.year
      ).toFixed(2);
    },
         schemecolor() {
      if (this.radical < 30) {
        return "#0C91FF";
      } else if (this.radical < 50) {
        return "#9F00FF";
      } else if (this.radical < 80) {
        return "#FFDB00";
      } else if (this.radical < 90) {
        return "#FF9051";
      } else {
        return "#FF3D3D";
      }
    },
    schemename() {
      if (this.radical < 30) {
        return "低风险型方案";
      } else if (this.radical < 50) {
        return "中低风险型方案";
      } else if (this.radical < 80) {
        return "中风险型方案";
      } else if (this.radical < 90) {
        return "中高风险型方案";
      } else {
        return "高利率高风险型方案";
      }
    },
    schemedescription() {
      if (this.radical < 30) {
        return "该方案股票类基金占少量份额，固收类基金占大量份额，适合十分注重稳健收益，更愿意保守投资的投资者。";
      } else if (this.radical < 50) {
        return "该方案股票类基金占较少份额，固收类基金占较多份额，适合偏好稳健收益，更愿意保守投资的投资者。";
      } else if (this.radical < 80) {
        return "该方案股票类基金占较多份额，固收类基金占较少份额，适合博取收益与稳健收益并重，均衡发展的投资者。";
      } else if (this.radical < 90) {
        return "该方案股票类基金占大量份额，固收类基金占少量份额，适合偏好博取收益，更愿意尝试全面进攻的投资者。";
      } else {
        return "该方案股票类基金占绝对份额，仅少量固收类基金作为缓冲，适合注重博取收益，更愿意尝试全面进攻的投资者。";
      }
    },
  },
  components: { BackButton },

  created(){
      this.getExpectedRate()
  }
};
</script>

<style scoped>
.el-progress >>> .el-progress-circle__track {
  stroke: #169bd5;
}

.el-progress >>> .el-progress__text {
  display: inline-flex;
  justify-content: center;
  width: 50%;
  left: 50%;
  top: 50%;
  padding: 5px;
  border-radius: 30px;
  transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(bottom, #ff9900, #ff0000) no-repeat;
  color: #ffffff;
  font-weight: bold;
}
.el-slider.slider2 >>> .el-slider__runway {
  background-color: #409eff;
}
.el-slider.slider2 >>> .el-slider__bar {
  background-color: #409eff;
}
.el-slider.slider1 >>> .el-slider__bar {
  background-color: #ffb571;
}
.el-slider.slider1 >>> .el-slider__runway {
  background-color: #169bd5;
}
</style>
